<script setup lang="ts">
import CdlSearch from "@/components/search";
import CdlTable from "@/components/table";
import CdlForm from "@/components/form"
import {Mode, Query, State} from "@/interfaces/components/Page";
import {useRouter} from "vue-router";
import {reactive, ref, h} from "vue";
import {useTablePagingTemplate} from "@/hooks/TableHooks";
import {Accident} from "@/interfaces/views/vehicle/accident";
import {FormData} from "@/interfaces/components/Page"
import {FormTree} from "@/interfaces/components/Form";
import {appStore} from "@/store/modules/app";
import {TableTree} from "@/interfaces/components/Table";
import {createPopup} from "@/utils/createPopup";
import {useGetDriverListApi} from "@/api/vehicle/driver";
import {useGetVehicleListApi} from "@/api/vehicle/vehicle";

const store = appStore()
const router = useRouter()
const request = {
  createdIsNeed: true,
  url: "/slag-truck/accidents",
}
const state = reactive<State<Query<Accident>, Accident>>({
  queryForm: {},
  dataList: []
})
const {query, added, loading} = useTablePagingTemplate(request, state)

const searchTree: FormTree<Accident> = [
  [
    {label: "类型", component: "select", prop: "type", options: store.getDict("accident_type"),
      optionProps: {label: "dictLabel", value: "dictValue"}
    }
  ]
]

const tableTree: TableTree<Accident> = {
  colRule: [
    {ti: "车牌号", prop: "licensePlate"},
    {ti: "司机", prop: "driverName"},
    {ti: "事故/违章类型", prop: "type", dict: "accident_type"},
    {ti: "发生时间", prop: "occurrenceTime", width: 160},
    {ti: "司机承担金额", prop: "costByDriver"},
    {ti: "公司承担金额", prop: "costByCompany"},
    {ti: "保险承担金额", prop: "costByInsurance"},
    {ti: "对方承担金额", prop: "costByOpposite"},
    {ti: "罚分", prop: "punish"},
    {ti: "地点", prop: "location"},
    {ti: "事故认定/处罚描述", prop: "officialConclusion", width: 200},
    {ti: "保险公司", prop: "insuranceCompany"}
  ],
  control: [
    {name: "详情", type: "info", prop: "id", method: jumpAccidentDetail}
  ]
}
const popupFormTree: FormTree<Accident> = [
    [
      {label: "关联车辆", component: "select", prop: "vehicleId", serviceOptionKey: "vehicleList",
        optionProps: {label: "licensePlate", value: "id"}},
      {label: "关联司机", component: "select", prop: "driverId", serviceOptionKey: "driverList",
        optionProps: {label: "name", value: "id"}}
    ],
    [
      {label: "事故日期", component: "datePicker", prop: "occurrenceTime"},
      {label: "地点", component: "datePicker", prop: "location"},
    ],
    [
      {label: "事故/违章类型", component: "select", prop: "type", options: store.getFormatDict("accident_type"),
        optionProps: {label: "dictLabel", value: "dictValue"}},
      {label: "事故/违章性质", component: "input", prop: "nature"}
    ],
    [
      {label: "保险公司承担", component: "input", prop: "costByInsurance"},
      {label: "司机承担", component: "input", prop: "costByDriver"}
    ],
    [
      {label: "公司承担", component: "input", prop: "costByCompany"},
      {label: "我方负责权值", component: "input", prop: "ourCost"}
    ],
    [
      {label: "对方承担", component: "input", prop: "costByOpposite"},
      {label: "赔偿总额", component: "input", prop: "totalCost"}
    ],
    [
      {label: "罚分", component: "input", prop: "punish"},
      {label: "保险公司", component: "input", prop: "insuranceCompany"}
    ],
    [
      {label: "事故描述", component: "input", prop: "description", type: "textarea", style: "flex: 1", max: 200}
    ],
    [
      {label: "处罚描述/事故认定", component: "input", prop: "officialConclusion", type: "textarea", style: "flex: 1", max: 200}
    ]
]
const popupForm = ref<FormData<Accident>>({
  id: undefined,
  vehicleId: undefined,
  licensePlate: "",
  driverId: undefined,
  driverName: "",
  occurrenceTime: "",
  location: "",
  type: undefined,
  nature: "",
  costByInsurance: "",
  costByDriver: "",
  costByCompany: "",
  ourCost: "",
  costByOpposite: "",
  totalCost: "",
  punish: "",
  insuranceCompany: "",
  description: "",
  officialConclusion: ""
})

let driverList: any[]
let vehicleList: any[]
/**
 * 获取司机列表
 */
function getDriverList(){
  return new Promise((resolve, reject) => {
    useGetDriverListApi().then(res =>{
      driverList = res.data
      resolve(res.data)
    })
  })
}
/**
 * 获取车辆列表
 */
function getVehicleList(){
  return new Promise((resolve, reject) => {
    useGetVehicleListApi().then(res =>{
      vehicleList = res.data
      resolve(res.data)
    })
  })
}
function jumpAccidentDetail(id: string){
  router.push({
    path: "/vehicleManage/accident/accidentDetail",
    query: {
      id: id
    }
  })
}
/**
 * 新增
 */
function openAccidentInsert(){
  createPopup("新增事故/违章", h(CdlForm, {
    templateTree: popupFormTree,
    model: popupForm.value,
    labelWidth: "130",
    init: {"driverList": getDriverList, "vehicleList": getVehicleList}
  }), "add", popupCallBack)
}
/**
 * 回调处理
 * @param mode
 * @param data
 */
function popupCallBack(mode: Mode, data: any){
  console.log(driverList);
  data.licensePlate = vehicleList?.find(item => item.id === data.vehicleId).licensePlate
  data.driverName = driverList?.find(item => item.id === data.driverId).name
  switch (mode){
    case "add":
      added(data)
      break
  }
}
</script>

<template>
  <el-card>
    <CdlSearch :model="state.queryForm" :template-tree="searchTree">
      <template #menu>
        <el-button type="primary" @click="openAccidentInsert">新增</el-button>
      </template>
    </CdlSearch>
    <CdlTable :template-tree="tableTree" :data="state.dataList" :loading="loading"></CdlTable>
  </el-card>
</template>
